import React, { Component, PureComponent } from 'react'
import { connect } from 'react-redux'
import { Button } from 'antd'

import { UserOutlined, LockOutlined } from '@ant-design/icons';

import MyForm from '@/components/MyForm'
import { initDataAsync } from '@/redux/actions/menu'

import $axios from '@/plugins/axios'
import { $basics } from '@/plugins/eng_config'
import { $setToken } from '@/plugins/baseInfo'

import { userData, getBaseData } from '@/mockData'
import './index.css'
window.userData = userData


const list = [
  {
    // label: '用户名',
    prop: 'username',
    type: 'Input',
    must: true,
    prefix: UserOutlined,
    placeholder: '请输入用户名',
    span: 24,
    size: 'large'
  },
  {
    // label: '密码',
    prop: 'password',
    type: 'Input',
    isPassword: true,
    placeholder: '请输入密码',
    prefix: LockOutlined,
    must: true,
    span: 24,
    size: 'large'
  },
]

class LoginPage extends PureComponent {

  formAddRef = React.createRef()

  goMain = () => {
    const { history } = this.props
    console.log(this.props)
    history.push('/main')
  }

  initLocalStorage = ({
    buttonPermissionList = [],
    menuList = [],
    roleList = [],
    ...userInfo
  }) => {
    localStorage.setItem('buttonPermissionList', JSON.stringify(buttonPermissionList))
    localStorage.setItem('menuList', JSON.stringify(menuList))
    localStorage.setItem('roleList', JSON.stringify(roleList))
    localStorage.setItem('userInfo', JSON.stringify(userInfo))
  }

  doLogin = () => {
    console.log(this.formAddRef.current.getFieldsValue())
    console.log($basics)
    const param = this.formAddRef.current.getFieldsValue()
    $axios.post(`${$basics}/basics/account/encryptLogin`, { ...param }).then(res => {
      $setToken(res.body.token)
      // this.props.initDataAsync().then(res => {
      //   this.props.history.push('/')
      // })
      getBaseData().then(res => {
        console.log(res)
        this.initLocalStorage(res.body)
        window.location.replace('xqSubmitManage.html')
      })
    })
  }

  render() {
    return (
      <div className='loginWrap'>
        <MyForm list={list} ref={this.formAddRef}></MyForm>
        <Button size="large" type="primary" block onClick={this.doLogin}>登录</Button>
      </div>
    )
  }
}

export default connect(
  state => ({

  }),
  { initDataAsync }
)(LoginPage)